/**
 * 全局樣式文件
 * 包含通用的樣式定義和變量
 */

// 顏色變量
:root {
  --primary-color: #31a880;
  --success-color: #34C759;
  --warning-color: #FF9500;
  --error-color: #FF3B30;
  --info-color: #5AC8FA;
  
  // 主題色變量
  --theme-color: #31a880;
  --theme-color-hover: #27866a;
  --theme-color-active: #1d6454;
  --theme-color-light: #f0f9f6;
  --theme-color-lighter: #f7fbf9;
  --theme-color-dark: #27866a;
  --theme-color-darker: #1d6454;
  --theme-color-disabled: #9dd4c0;
  --theme-color-border: #d1e8e0;
  --theme-color-shadow: rgba(49, 168, 128, 0.1);
  
  --text-primary: #333333;
  --text-secondary: #666666;
  --text-tertiary: #999999;
  --text-disabled: #CCCCCC;
  
  --bg-primary: #FFFFFF;
  --bg-secondary: #F8F9FA;
  --bg-tertiary: #F1F3F4;
  
  --border-color: #E5E5E5;
  --border-light: #F0F0F0;
  
  --shadow-light: 0 2px 8px rgba(0, 0, 0, 0.1);
  --shadow-medium: 0 4px 16px rgba(0, 0, 0, 0.15);
  --shadow-heavy: 0 8px 32px rgba(0, 0, 0, 0.2);
}

// 通用樣式類
.flex {
  display: flex;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flex-column {
  display: flex;
  flex-direction: column;
}

.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

// 間距類
.m-0 { margin: 0; }
.m-1 { margin: 4rpx; }
.m-2 { margin: 8rpx; }
.m-3 { margin: 12rpx; }
.m-4 { margin: 16rpx; }
.m-5 { margin: 20rpx; }

.p-0 { padding: 0; }
.p-1 { padding: 4rpx; }
.p-2 { padding: 8rpx; }
.p-3 { padding: 12rpx; }
.p-4 { padding: 16rpx; }
.p-5 { padding: 20rpx; }

// 字體大小類
.text-xs { font-size: 20rpx; }
.text-sm { font-size: 24rpx; }
.text-base { font-size: 28rpx; }
.text-lg { font-size: 32rpx; }
.text-xl { font-size: 36rpx; }
.text-2xl { font-size: 40rpx; }

// 字體粗細類
.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }

// 圓角類
.rounded-sm { border-radius: 4rpx; }
.rounded { border-radius: 8rpx; }
.rounded-md { border-radius: 12rpx; }
.rounded-lg { border-radius: 16rpx; }
.rounded-full { border-radius: 50%; }

// 陰影類
.shadow-sm { box-shadow: var(--shadow-light); }
.shadow { box-shadow: var(--shadow-medium); }
.shadow-lg { box-shadow: var(--shadow-heavy); }

// 過渡類
.transition { transition: all 0.3s ease; }
.transition-fast { transition: all 0.15s ease; }
.transition-slow { transition: all 0.5s ease; }

// 響應式隱藏類
.hidden { display: none; }
.block { display: block; }

// 溢出處理類
.overflow-hidden { overflow: hidden; }
.overflow-auto { overflow: auto; }
.overflow-scroll { overflow: scroll; }

// 定位類
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }

// 寬高類
.w-full { width: 100%; }
.h-full { height: 100%; }
.w-screen { width: 100vw; }
.h-screen { height: 100vh; }

// 工具類
.cursor-pointer { cursor: pointer; }
.select-none { user-select: none; }
.select-text { user-select: text; }

// 動畫類
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

@keyframes slideDown {
  from { transform: translateY(-100%); }
  to { transform: translateY(0); }
}

.fade-in { animation: fadeIn 0.3s ease; }
.slide-up { animation: slideUp 0.3s ease; }
.slide-down { animation: slideDown 0.3s ease; }
